<template>
  <div id="app" class="line-bar">
    <div ref="lineChart" :style="{ width: '100%', height: '368px' }"></div>
  </div>
</template>
<script>
export default {
  name: 'line-bar',
  data() {
    return {}
  },
  props: {
    chartData: Array,
    YAxis: Array,
    areaFormatter:{
      type:Boolean,
      default:false
    },
    stackBorderRadius:{
      type:Boolean,
      default:false
    },
    // categorys: Array,
    // xData: Array
  },
  created() {},

  activated() {},

  mounted() {},

  methods: {
    initEChart(categorys,xData,index) {
      var myChartSports
      let el = this.$refs.lineChart
      if (this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      } else {
        myChartSports = this.$echarts.init(el)
      }
      myChartSports.clear() //清空画布数据
      // 调用showLoading方法
      myChartSports.showLoading({
        text: 'loading',
        color: '#13C2C2',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
      let newSeries = [],legendTitle = [],yAxis = []
      this.YAxis.forEach(item => {
        let json = {
          type: 'value',
          name: item.name,
          position: item.position,
          alignTicks: true,
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          }
        }
        yAxis.push(json)
      })
      for (let i = 0; i < this.chartData.length; i++) {
        const item = this.chartData[i]
        let json = {}
        legendTitle.push(item.legendTitle)
        if (item.type == 'bar') {
          json = {
            name: item.legendTitle,
            data: xData[i],
            type: item.type,
            stack:item.stack,
            barWidth: 12,
            yAxisIndex: 0,
            barGap: '100%' /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: '120%' /*多个并排柱子设置柱子之间的间距*/,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: item.color[0]
                  },

                  {
                    offset: 1,
                    color: item.color[1]
                  }
                ]
              },
              barBorderRadius: this.stackBorderRadius ? (i%2 == 0?[0,0,0,0]:[15, 15, 0, 0]) : [15, 15, 0, 0]
            } 
          }
        }
        if (item.type == 'line') {
          json = {
            name: item.legendTitle,
            data: xData[i],
            type: item.type,
            // barWidth: 10,
            yAxisIndex: this.YAxis.length > 1 ? 1 : 0,
            color: item.color[0],
            smooth:item.smooth,
            showSymbol: false,
          }
        }
        newSeries.push(json)
      }
      let _this = this;
      let optionChart = {
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: legendTitle,
          orient: 'horizontal', //可设定图例水平（horizontal）排列还是竖直排列
          x: 'center', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          textStyle: {
            color: '#333'
          },
          right: '20%'
        },
        xAxis: {
          type: 'category',
          data: categorys
        },
        yAxis: yAxis,
        series: newSeries
      }
      if (_this.areaFormatter) {
        optionChart.tooltip.formatter = function(params){
          let relVal = "";
          params.forEach((item,i) => {
            if (typeof item.data == "object") {
              relVal += "</br>" + item.marker + item.seriesName + " - " + item.data.areaName+"：" + item.value
            }else{
              relVal += "</br>" + item.marker + item.seriesName + "：" + item.value 
            }
          });
          return relVal
        }
      }
      setTimeout(() => {
        // setOption前隐藏loading事件 
        myChartSports.hideLoading();
        myChartSports.setOption(optionChart)
      }, 1000);
      setTimeout(() => {
        this.$emit("ok")
      }, 3000);
      window.addEventListener('resize', () => {
        myChartSports.resize()
      })
    },
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
